import React from 'react'
import PropTypes from 'prop-types'
import { Table, Modal } from 'antd'
import styles from './List.less'
import classnames from 'classnames'
import AnimTableBody from '../../components/DataTable/AnimTableBody'
import { DropOption } from '../../components'
import { Link } from 'dva/router'

const confirm = Modal.confirm

const List = ({ onDeleteItem, onEditItem, isMotion, location, ...tableProps }) => {
  const handleMenuClick = (record, e) => {
    if (e.key === '1') {
      onEditItem(record)
    } else if (e.key === '2') {
      confirm({
        title: 'Are you sure delete this record?',
        onOk () {
          onDeleteItem(record.id)
        },
      })
    }
  }

  const columns = [
    {
      title: 'log',
      dataIndex: 'image',
      className: styles.image,
      width: 64,
      render: (text) => <img alt="Feture" width={26} src={text} />,
}, {
    title: '粉丝昵称',
      dataIndex: 'nickname',
  }, {
    title: '地域',
      dataIndex: 'province',
  }, {
    title: '最近互动时间',
      dataIndex: 'interactionTime',
      render:(interactionTime) => new Date(interactionTime).format("yyyy-MM-dd HH:mm:ss"),
  }, {
    title: '互动次数',
      dataIndex: 'tags',
  }, {
    title: '关注时间',
      dataIndex: 'followTime',
      render:(followTime) => new Date(followTime).format("yyyy-MM-dd HH:mm:ss"),
  }, {
    title: '最后一次关注来源',
      dataIndex: 'comments',
  }, {
    title: '最近取关时间',
      dataIndex: 'unFollowTime',
      render:(unFollowTime) => new Date(unFollowTime).format("yyyy-MM-dd HH:mm:ss"),
  }, {
    title: '关注时长',
      dataIndex: 'date',
  },
]

  const getBodyWrapperProps = {
    page: location.query.page,
    current: tableProps.pagination.current,
  }

  const getBodyWrapper = body => { return isMotion ? <AnimTableBody {...getBodyWrapperProps} body={body} /> : body }

  return (
    <div>
      <Table
        {...tableProps}
        className={classnames({ [styles.table]: true, [styles.motion]: isMotion })}
        bordered
        scroll={{ x: 1250 }}
        columns={columns}
        simple
        rowKey={record => record.id}
        getBodyWrapper={getBodyWrapper}
      />
    </div>
  )
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  isMotion: PropTypes.bool,
  location: PropTypes.object,
}

export default List
